<template>
  <div class="change-container">
    <div class="main-content">
      <div class="one-column-tri">
        <i class="iconfont icon-tel">&#xe62f;</i>
        <input type="text" class="tel-input" v-model="oleNumber" placeholder="请您输入旧手机号码" id="1">
        <button class="getVerify-btn" v-if="!isSetnew && time < 60">已发送({{ time }})</button>
        <button class="getVerify-btn" v-else  :disabled="isSetnew" @click="getVerify(oleNumber)">验证码</button>
      </div>
      <div class="one-column">
        <i class="iconfont icon-code">&#xe636;</i>
        <input type="text" class="tel-input" v-model="oldVertifyCode" placeholder="手机验证码" id="2">
      </div>
      <div class="one-column-tri">
        <i class="iconfont icon-tel-red">&#xe62f;</i>
        <input type="text" class="tel-input" v-model="newNumber" @focus="checkOld" placeholder="请您输入新手机号码" id="3">
        <button class="getVerify-btn" v-if="isSetnew && time < 60">已发送({{ time }})</button>
        <button class="getVerify-btn" :disabled="!isSetnew" v-else @click="getVerify(newNumber)">验证码</button>
      </div>
      <div class="one-column">
        <i class="iconfont icon-code-red">&#xe636;</i>
        <input type="text" class="tel-input" v-model="newVertifyCode" placeholder="手机验证码" id="4">
      </div>
    </div>
    <div class="complete-btn" @click="complete">完成</div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      oleNumber: '',
      oldVertifyCode: '',
      newNumber: '',
      newVertifyCode: '',
      isSetnew: false,
      timerSec: null,
      time: 60
    }
  },

  methods: {
    everySec () {
      let second = Number(this.time)
      if (second <= 0) {
        this.time = 60
        clearInterval(this.timerSec)
      } else {
        second--
        if (second >= 0 && second < 10) {
          this.time = '0' + second
        } else if (second >= 10 && second < 60) {
          this.time = '' + second
        }
      }
    },
    getVerify (telNumber) {
      let telRegex = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/
      if (!telNumber || !telRegex.test(telNumber)) {
        wx.showToast({
          title: '请输入正确的手机号码',
          icon: 'none',
          duration: 1000
        })
      } else {
        wx.showToast({
          title: '验证码以发送',
          icon: 'success',
          duration: 1000
        })
        this.time = 60
        clearInterval(this.timerSec)
        this.timerSec = setInterval(() => {
          // 每秒刷新
          this.everySec()
        }, 1000)
      }
    },
    checkOld () {
      // check old code
      this.time = 61
      this.isSetnew = true
    },
    complete () {
      // check new code
      clearInterval(this.timerSec)
      this.time = 61
      // 调接口update
    }
  },

  onShow () {
    this.isSetnew = false
    this.time = 61
    if (this.timerSec) {
      clearTimeout(this.timerSec)
    }
  }
}
</script>

<style scoped>
.change-container {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: #fff;
}

.main-content {
  padding: 40rpx 50rpx 40rpx 40rpx;
}

.one-column,
.one-column-tri {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 25rpx 0;
  border-bottom: 2rpx solid #c9c9c9; 
}

.one-column {
  justify-content: flex-start;
}

.one-column-tri {
  justify-content: space-between;
}

.icon-tel {
  font-size: 55rpx;
  color: #22ac38;
}
.icon-code {
  margin: 0 10rpx;
  font-size: 35rpx;
  color: #22ac38;
}

.icon-tel-red {
  font-size: 55rpx;
  color: #ce4b55;
}

.icon-code-red {
  margin: 0 10rpx;
  font-size: 35rpx;
  color: #ce4b55;
}


.tel-input {
  width: 440rpx;
  font-size: 30rpx;
  padding: 0 20rpx;
}

.getVerify-btn {
  padding: 0;
  width: 170rpx;
  text-align: center;
  font-size: 30rpx;
  background-color: #22ac38;
  color: #fff;
  border: none;
  border-radius: 8rpx;
  background-color: #22ac38;
  color: #fff;
}

.complete-btn {
  margin: 36rpx 50rpx;
  box-sizing: border-box;
  height: 88rpx;
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  background-color: #22ac38;
  color: #fff;
  border-radius: 8rpx;
}
</style>
